<!DOCTYPE html>
<html lang="zh-cn">

<head>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>个人中心 | 互联云</title>

  <link rel="import" href="partials/comm-css.html?__inline"/>

  <!-- Morris Charts CSS -->
  <link href="../r/bower_components/morrisjs/morris.css" rel="stylesheet">

  <link href="../r/bower_components/alertify/themes/alertify.core.css" rel="stylesheet" type="text/css">
  <link href="../r/bower_components/alertify/themes/alertify.bootstrap.css" rel="stylesheet" type="text/css">

  <!-- Timeline CSS -->
  <link href="../r/static/css/timeline.css" rel="stylesheet">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->

</head>

<body>

<div id="wrapper">
  <input type="hidden" id="userId" value="${userId}">
  <!-- Navigation -->
  <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">

    <link rel="import" href="partials/top.html?__inline">

    <div class="navbar-default sidebar" role="navigation">
      <div class="sidebar-nav navbar-collapse">
        <link rel="import" href="partials/left-sidemenu.html?__inline">
      </div>
    </div>
  </nav>

  <div class="modal fade" id="account-insert" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <input type="hidden" id="editType" value="0">
    <input type="hidden" id="cloudId" value="">
    <div class="modal-dialog" style="width: 360px;">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">编辑新账户</h4>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label>账户名称：</label>
            <input type="text" placeholder="请输入账户名称" id="account" name="account" style="width:230px;"/><br/><br/>
            <label>账户密码：</label>
            <input type="password" placeholder="请输入账户密码" id="password" name="password" style="width:230px;"/><br/><br/>
            <label>账户类型：</label>
            <select id="cloudType">
              <option value="1">华为网盘</option>
              <option value="2">新浪微盘</option>
            </select>
          </div>
          <div class="form-group" style="text-align: center;">
            <button class="btn btn-sm btn-success" id="insert-submit">添加</button>
          </div>
        </div>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>

  <div id="page-wrapper" style="height: 100%">
    <div class="row">
      <div class="col-lg-12">
        <h1 class="page-header">用户中心</h1>
      </div>
      <div style="position: relative; left: 15px; height: 50px; font-size: 20px;">
        <span>用户名:</span><span style="margin-left: 25px;">${username}</span>
        <span style="margin-left: 200px;">头像:</span><img src="${headImg}"
                                                         style="width: 100px; height: 100px; margin-left: 25px"/>
      </div>
    </div>

    <div class="row" style="margin-top: 75px;">
      <div class="col-lg-12">
        <h3 class="page-header">我的账户
          <div class="pull-right">
            <a href="#" type="button" class="btn btn-sm btn-primary" id="btn-add">添加账户</a>
          </div>
        </h3>
      </div>
      <!-- /.col-lg-12 -->
    </div>

    <!-- /.row -->
    <div class="row">
      <div class="col-lg-12">
        <div class="panel panel-default">
          <div class="panel-heading">
            账户列表
          </div>
          <!-- /.panel-heading -->
          <div class="panel-body">
            <div class="dataTable_wrapper">
              <table class="table table-striped table-bordered table-hover">
                <thead>
                <tr class="warning">
                  <th>账户ID</th>
                  <th>账号</th>
                  <th>账户类型</th>
                  <th>总空间</th>
                  <th>已用空间</th>
                  <th>创建时间</th>
                  <th>操作</th>
                </tr>
                </thead>
                <tbody id="account-list-body"></tbody>
              </table>
            </div>
          </div>
          <!-- /.panel-body -->
        </div>
        <!-- /.panel -->
      </div>
      <!-- /.col-lg-12 -->
    </div>
  </div>
  <!-- /#page-wrapper -->
</div>
</div>
<script src="../r/require.js"></script>

<script type="text/javascript" src="../r/static/js/app/admin-account.js"></script>
<script id="tpl-account-list-item" type="text/template">
  <tr>
    <td>{{cloudId}}</td>
    <td>{{account}}</td>
    <td>{{accountType(cloudType)}}</td>
    <td>{{totalMemory}}GB</td>
    <td>{{usedMemory}}GB</td>
    <td>{{datetime(createTime)}}</td>
    <td>
      <a href="#" type="button" data-id="{{cloudId}}" class="btn btn-warning btn-edit">编辑</a>
      <a href="#" type="button" data-id="{{cloudId}}" class="btn btn-info btn-delete">删除</a>
    </td>
  </tr>
</script>

<link rel="import" href="partials/partials-loading.html?__inline"/>
</body>
</html>
